@use "../../assets/scss/mixins/base" as *;

body {
  background-color: #ffdc30;
  font-family: "Concert", sans-serif;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

$black: #13242c;
$white: #fff;
$brown: #93292c;
$green: #529b47;
$green-dark: #3d7734;
$green-darkest: #2a5424;
$yellow: #ffdc30;
$gray: #707070;
$gray-light: #999;
$gray-lighest: #bababa;
$gray-dark: #4c4c4c;
$red: #b23c3c;

.container {
  @include abs;
  @include wh(750px, 350px);
  transform: translate(-50%, -50%) scale(0.6);
  .bg {
    @include centered;
    @include circle(400px, rgba($yellow, 0.2));
    overflow: hidden;
    box-shadow: 0 0 0 90px rgba($brown, 0.1);
  }
  .godzilla {
    @include top50;
    @include wh(200px, 350px);
    right: 0;

    .shadow {
      @include rect(290px, 10px, rgba($black, 0.2), 20px);
      @include abs-br(-5px, -15px);
    }
    .back {
      @include abs(120px, unset) {
        right: 80px;
      }
      @include circle(30px, rgba($green, 1));
      box-shadow: 36px 180px 0 $green, 65px 50px 0 $green, 83px 90px 0 $green,
        87px 135px 0 $green;
    }
    .shape {
      @include abs(unset, unset) {
        bottom: 0;
      }
      @include wh(200px, 300px);
      overflow: hidden;
      @include pseudo-ba;
      &::before {
        @include rect(100px, 40px, $green-darkest, 50px 50px 0 0);
        bottom: 0;
        right: 0;
      }
      &::after {
        @include circle(250px, $green);
        top: 80px;
        left: -30%;
      }
    }
    .leg {
      @include abs-bl(0, -30px);
      @include rect(100px, 110px, $green-dark, 50px 50px 0 0);
      @include pseudo-ba {
        @include rect(40px, 20px, $green-darkest, 50px 50px 0 0);
        bottom: 0;
      }
      &::after {
        left: -10px;
      }
      &::before {
        left: 15px;
      }
    }
    .arm {
      @include abs-tr(170px, 110px);
      @include rect(150px, 80px, $green-dark, 80px);
      @include pseudo-ba;
      animation: arm-anima 2s ease-in-out infinite;
      &::before {
        @include rect(60px, 30px, $green-dark, 30px);
        left: -15px;
        top: -5px;
      }
      &::after {
        @include circle(85px $green-dark);
        left: -5px;
        bottom: 0;
      }
    }
    .head {
      @include abs-tl(60px, -40px);
      @include circle(120px, $green);
      animation: head-anima 2s ease-in-out infinite;
      &::after {
        content: "";
        @include circle(20px, $yellow);
        @include top50;
        left: 20px;
      }
    }
  }
  .bigrobot {
    @include top50;
    @include wh(200px, 350px);
    left: 0;
    .shadow {
      @include abs-bl(-5px, 10px);
      @include rect(270px, 10px, rgba($black, 0.2), 20px);
    }
    .back {
      @include abs-tl(100, 60, "px");
      @include rect(80px, 180px, $gray-dark, 10px 50px 0 50px);
      transform: rotate(-20deg);
    }
    #back2 {
      top: 70px;
      left: 70px;
      background-color: $red;
    }
    .shape {
      position: absolute;
      bottom: 0;
      @include wh(200px, 300px);
      overflow: hidden;
      &::after {
        content: "";
        @include abs-tr(80px, -30%);
        @include circle(250px, $gray);
      }
    }
    .leg {
      @include abs-br(0, -30px);
      @include rect(100px, 110px, $gray-dark, 50px 50px 0 0);
      @include pseudo-ba {
        @include rect(110px, 20px, $red, 0 50px 0 0);
        right: -10px;
        bottom: 0;
      }
    }
    .arm {
      @include abs-tl(170, 110, "px");
      @include rect(150px, 80px, $gray-dark, 80px);
      animation: arm-anima 2s 1s ease-in-out infinite;
      @include pseudo-ba {
        background-color: $gray-dark;
      }
      &::before {
        @include rect(60px, 30px, $gray-dark, 30px);
        top: -5px;
        right: -15px;
      }
      &::after {
        @include circle(85px $gray-dark);
        right: -5px;
        bottom: 0;
      }
    }
    .head {
      @include circle(120px, $gray);
      @include abs-tr(60px, -40px);
      animation: head-anima 2s 1s ease-in-out infinite;
      &::after {
        content: "";
        @include rect(70px, 20px, $yellow, 50px);
        @include top50;
        right: -20px;
      }
    }
  }
  .skyscraper-shadow {
    @include rect(150px, 10px, rgba($black, 0.2), 20px);
    @include abs-bl(-5px, 300px);
  }
  .skyscraper-box {
    @include left50;
    @include wh(250px, 300px);
    bottom: 0;
    overflow: hidden;
    p {
      position: absolute;
      z-index: 1;
      width: 90px;
      top: -50px;
      color: #fff;
      font-size: 16px;
      margin-left: 32px;
      text-transform: uppercase;
    }
    .skyscraper {
      @include abs-tl(80px, calc(50% - 60px));
      @include rect(120px, 250px, $gray-light, 5px 5px 0 0);
      transform-origin: center bottom;
      animation: swing 2s ease-in-out infinite;
      @include pseudo-ba {
        height: 50px;
        @include left50;
      }
      &::before {
        width: 50px;
        border-radius: 50% 50% 0 0;
        background-color: $gray-light;
        top: -75px;
      }
      &::after {
        width: 90px;
        border-radius: 10px 10px 0 0;
        background-color: $gray;
        top: -50px;
      }
      .window {
        @include rect(10px, 20px, $gray-lighest, 2px);
        @include abs-tl(15px, 15px);
        box-shadow: 20px 0 $gray-lighest, 40px 0 $gray-lighest,
          60px 0 $gray-lighest, 80px 0 $gray-lighest, 0 30px $gray-lighest,
          20px 30px $gray-lighest, 40px 30px $gray-lighest,
          60px 30px $gray-lighest, 80px 30px $gray-lighest, 0 60px $gray-lighest,
          20px 60px $gray-lighest, 40px 60px $gray-lighest,
          60px 60px $gray-lighest, 80px 60px $gray-lighest, 0 90px $gray-lighest,
          20px 90px $gray-lighest, 40px 90px $gray-lighest,
          60px 90px $gray-lighest, 80px 90px $gray-lighest,
          0 120px $gray-lighest, 20px 120px $gray-lighest,
          40px 120px $gray-lighest, 60px 120px $gray-lighest,
          80px 120px $gray-lighest, 0 150px $gray-lighest,
          20px 150px $gray-lighest, 40px 150px $gray-lighest,
          60px 150px $gray-lighest, 80px 150px $gray-lighest;
      }
    }
  }
}

@keyframes swing {
  0%,
  100% {
    transform: rotate(11deg);
  }
  50% {
    transform: rotate(-11deg);
  }
}
@keyframes head-anima {
  0%,
  70% {
    top: 60px;
  }
  47% {
    top: 80px;
  }
}
@keyframes arm-anima {
  0%,
  70% {
    width: 150px;
  }
  47% {
    width: 225px;
  }
}
